import PubSub from 'pubsub-js';
const appInstance = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    songId: '', // 当前歌曲id
    songList: {}, // 歌曲详情
    isPlay: false, // 控制动画效果
    musicUrl: '', // 当前歌曲音频链接
    currentTime: '00:00', // 当前歌曲时间
    durationTime: "--:--", // 歌曲总时长
    currentWidth: 0, // 控制进度条长度
  },


  // 获取歌曲详情
  async getMusicInfo() {
    const result = await this.$request('/song/detail', {
      ids: this.data.songId
    });
    // const result = await this.$request('/song/detail',{id:1812673579})

    console.log(result.songs[0]);
    this.setData({
      songList: result.songs[0]
    })
  },
  // 获取歌曲地址
  async getMusicUrl() {
    const result1 = await this.$request('/song/url', {
      id: this.data.songId
    });
    console.log(result1.data[0].url);
    this.setData({
      musicUrl: result1.data[0].url
    })
  },
  // 播放歌曲
  async handlePlay() {
    // 根据状态判断要播放还是暂停歌曲,播放之前判断如果没地址则先请求获取
    if (!this.data.isPlay) {
      this.backgroundAudioManager.pause()
      // 缓存当前歌曲的播放状态
      appInstance.globalData.playState = false;
    } else {
      if (!this.data.musicUrl) {
        await this.getMusicUrl()
      }

      this.backgroundAudioManager.src = this.data.musicUrl;
      this.backgroundAudioManager.title = this.data.songList.name;
      // 缓存当前播放的歌曲id
      appInstance.globalData.audioId = this.data.songId;

      // 缓存当前歌曲的播放状态
      appInstance.globalData.playState = true;
    }
    this.setData({
      isPlay: !this.data.isPlay
    })
  },
  // 用于监视用户点击下一首按钮
  switchType(event) {

    // 流程1:向每日推荐页面发送用户操作标识
    const type = event.currentTarget.id;
    PubSub.publish('switchType', type);
  },
  // 专门用于绑定背景音频相关事件
  addEvent() {

    // 监视背景音频进度更新事件
    this.backgroundAudioManager.onTimeUpdate(() => {
      if (this.flag) return;
      // 获取当前歌曲的当前进度,单位为s
      // 获取当前歌曲的总时长,单位为s
      const {
        currentTime,
        duration
      } = this.backgroundAudioManager;

      this.setData({
        currentTime: this.$moment(currentTime * 1000).format('mm:ss'),
        currentWidth: currentTime / duration * 100
      })
    })
  },
  // 用于监视用户拖拽完进度条,手指抬起时间,需要跳转歌曲进度
  handleTouchEnd() {
    // console.log('handleTouchEnd')
    this.flag = false;
    const startTime = this.data.currentWidth / 100000 * this.data.musicInfo.dt

    // this.backgroundAudioManager.startTime = startTime;

    this.backgroundAudioManager.seek(startTime)

    // console.log('startTime',startTime)
  },

  // 用于监视用户在进度条区域的滑动效果
  handleTouchMove(event) {

    if (this.flag1) return;

    this.flag1 = true;
    // console.log('handleTouchMove',event)
    const clientX = event.touches[0].clientX;
    // 当前变量的值是手指距离进度条最左侧的位置
    const left = clientX - this.offsetLeft;

    // console.log('left',left)

    // 获取当前手指位置的歌曲百分比信息
    const currentWidth = left / this.width * 100;

    if (currentWidth > 100 || currentWidth < 0) return;
    this.setData({
      currentWidth
    })

    setTimeout(() => {
      this.flag1 = false;
    }, 20);
  },

  // 用于监视用户在进度条区域按下事件
  handleTouchStart() {
    this.flag = true;
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // options 中可以拿到路由携带过来的参数  
    const {
      songId
    } = options
    this.setData({
      songId
    })
    this.getMusicInfo()
    // 如果当前页面显示的歌曲和正在播放的背景音频是同一首歌
    const {
      audioId,
      playState
    } = appInstance.globalData;
    // console.log(playState,audioId ,songId)
    if (playState && audioId == songId) {
      this.setData({
        isPlay: true
      })
    }

    // 在页面加载的时候,查找一次背景音频管理器对象,之后都可以直接从this身上读取
    this.backgroundAudioManager = wx.getBackgroundAudioManager();

    this.addEvent();

    // 准备工作3:用于接收每日推荐页面返回的歌曲id
    this.token = PubSub.subscribe("sendId", (msg, id) => {
      this.setData({
        songId: id
      })
      const promise1 = this.getMusicInfo();
      const promise2 = this.getMusicUrl();
      Promise.all([promise1, promise2])
        .then(() => {
          // 如果前两个请求都成功才执行以下代码,播放歌曲
          // const backgroundAudioManager = wx.getBackgroundAudioManager();

          this.backgroundAudioManager.src = this.data.musicUrl;
          this.backgroundAudioManager.title = this.data.musicInfo.name;
          // 缓存当前播放的歌曲id
          appInstance.globalData.audioId = this.data.songId;

          // 缓存当前歌曲的播放状态
          appInstance.globalData.playState = true;
          this.setData({
            isPlay: true
          })
        }).catch((error) => {
          // 如果任何一个请求失败,则弹窗提示用户
          wx.showToast({
            title: error,
            icon: "none"
          })
        })

    })
    // 1.生成节点查找器
    const selectorQuery = wx.createSelectorQuery();

    // 2.找到需要的节点对象
    selectorQuery.select("#mask").boundingClientRect((data) => {
      // console.log('boundingClientRect',data)

      // 存储当前mask元素的实际宽度
      this.width = data.width;

      // 存储mask元素距离屏幕最左边的距离
      this.offsetLeft = data.left;
    }).exec();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 在页面卸载的时候,解绑当前组件绑定的消息订阅
    PubSub.unsubscribe(this.token);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})